<template>
  <!-- 歌单页面 -->
  <div class="playlist">
    <div class="wrap">
      <div class="title">
        <div class="left">
          <div>{{keyword}}</div>
          <a href="javascript:;">
            <i class="icon" @click="showPopBox = !showPopBox">
              选择分类
              <span class="sm-icon"></span>
            </i>
          </a>
        </div>
        <div class="right">
          <a href="javascript:;">热门</a>
        </div>
      </div>
      <!-- 弹出框 -->
      <div class="pop-box" v-show="showPopBox">
        <div class="icon"></div>
        <div class="box">
          <div class="box-title">
            <a href="javascript:;" @click="keyword = '全部'">全部风格</a>
          </div>
          <div class="box-content">
            <ul class="left">
              <li class="l-1">
                <i></i>
                语种
              </li>
              <li class="l-2">
                <i></i>
                风格
              </li>
              <li class="l-3">
                <i></i>
                场景
              </li>
              <li class="l-4">
                <i></i>
                情感
              </li>
              <li class="l-5">
                <i></i>
                主体
              </li>
            </ul>
            <ul class="right">
              <li class="r-1">
                <i v-for="item,index in 20" :key="index">
                  <a href="javascript:;" @click="changeKeyWord('华语')" :class="{active:keyword=='华语'}">华语</a>
                  <span>|</span>
                </i>
              </li>
              <li class="r-2">
                <i v-for="item,index in 20" :key="index">
                  <a href="javascript:;">流行</a>
                  <span>|</span>
                </i>
              </li>
              <li class="r-3">
                <i v-for="item,index in 20" :key="index">
                  <a href="javascript:;">清晨</a>
                  <span>|</span>
                </i>
              </li>
              <li class="r-4">
                <i v-for="item,index in 20" :key="index">
                  <a href="javascript:;">怀旧</a>
                  <span>|</span>
                </i>
              </li>
              <li class="r-5">
                <i v-for="item,index in 20" :key="index">
                  <a href="javascript:;">综艺</a>
                  <span>|</span>
                </i>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 主要内容区 -->
      <playlist-content></playlist-content>
    </div>
  </div>
</template>

<script>
// 主要内容区域组件
import playlistContent from '@/components/find-music-components/playlist/content'
export default {
    name:'playlist',
    components:{playlistContent},
    data(){
      return{
        keyword:'全部',
        // 弹出框是否显示
        showPopBox:false,
        // 当前页码
        currentPage:0
      }
    },
    mounted(){
      // console.log(this.$route);
      // 将关键字保存
      this.keyword = this.$route.query.keyword
    },
    methods:{
      // 切换关键字显示
      changeKeyWord(keyword){
        this.keyword = keyword
      }
    }
}
</script>

<style scoped lang="scss">
  .playlist{
    width: 100%;
    background-color: #f5f5f5;
    .wrap{
      width: 982px;
      padding: 40px 40px 0 40px;
      box-sizing: border-box;
      background-color: #fff;
      margin: 0 auto;
      border-left: 1px solid #d3d3d3;
      border-right: 1px solid #d3d3d3;
      .title{
        width: 100%;
        height: 40px;
        border-bottom: 2px solid #c20c0c;
        .left{
          float: left;
          display: flex;
          div{
            font-size: 24px;
            color: #333;
            line-height: 28px;
            margin-right: 10px;
          }
          a{
            display: inline-block;
            width: 85px;
            height: 31px;
            font-size: 12px;
            padding-right: 4px;
            background: url('@/assets/button2.png') no-repeat;
            background-position: right -100px;
            color: #0c73c2;
            &:hover{
              background-position: right -182px;
            }
            .icon{
              display: inline-block;
              line-height: 31px;
              text-align: center;
              padding: 0 10px 0 15px;
              background: url('@/assets/button2.png') no-repeat;
              background-position: 0 -59px;
              &:hover{
                background-position: 0 -141px;
              }
              .sm-icon{
                display: inline-block;
                vertical-align: middle;
                width: 8px;
                height: 5px;
                background: url('@/assets/icon.png') no-repeat;
                background-position: -70px -543px;
              }
            }
          }
        }
        .right{
          float: right;
          line-height: 29px;
          a{
            display: inline-block;
            width: 46px;
            height: 29px;
            text-align: center;
            color: #fff;
            background: url('@/assets/button.png') no-repeat;
            background-position: 0 0;
            font-size: 12px;
            border-radius: 3px;
            &:hover{
              text-decoration: underline;
            }
          }
        }
      }
      .pop-box{
        width: 700px;
        font-size: 12px;
        color: #333;
        position: relative;
        border: 1px solid #eee;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0,0,0,.7);
        margin-top: 5px;
        margin-left: -20px;
        .icon{
          width: 24px;
          height: 11px;
          background: url('@/assets/iconall.png') no-repeat;
          background-position: -48px 0;
          position: absolute;
          top: -11px;
          left: 110px;
        }
        .box{
          width: 100%;
          .box-title{
            width: 100%;
            height: 48px;
            padding-left: 26px;
            box-sizing: border-box;
            border-bottom: 1px solid #e6e6e6;
            &::after{
              content: '';
              display: inline-block;
              vertical-align: middle;
              height: 100%;
            }
            a{
              display: inline-block;
              vertical-align: middle;
              width: 75px;
              height: 26px;
              line-height: 26px;
              text-align: center;
              background: url('@/assets/button.png') no-repeat;
              background-position: 0 -64px;
              color: #333;
              &:hover{
                text-decoration: underline;
              }
            }
          }
          .box-content{
            display: flex;
            box-sizing: border-box;
            padding-left: 26px;
            .l-1,.r-1{
              height: 40px;
            }
            .l-2,.r-2{
              height: 88px;
            }
            .l-3,.r-3{
              height: 64px;
            }
            .l-4,.r-4{
              height: 64px;
            }
            .l-5,.r-5{
              height: 89px;
            }
            .left{
              width: 70px;
              font-weight: bold;
              i{
                  display: inline-block;
                  vertical-align: middle;
                  width: 24px;
                  height: 24px;
                  background: url('@/assets/icon.png') no-repeat;
                  margin-right: 5px;
              }
              .l-1{
                margin-top: 15px;
                i{
                  background-position: -20px -735px;
                }
              }
              .l-2{
                margin-top: 15px;
                i{
                  background-position: 0 -62px;
                }
              }
              .l-3{
                margin-top: 14px;
                i{
                  background-position: 0 -89px;
                }
              }
              .l-4{
                margin-top: 14px;
                i{
                  background-position: 0 -118px;
                }
              }
              .l-5{
                margin-top: 14px;
                i{
                  background-position: 0 -142px;
                }
              }
            }
            .right{
              width: 592px;
              border-left: 1px solid #e6e6e6;
              .r-1,.r-2,.r-3,.r-4,.r-5{
                padding: 0 15px 0 15px;
                box-sizing: border-box;
                line-height: 25px;
                margin-top: 14px;
              }
              a{
                padding: 0 5px;
                color: #333;
                &:hover{
                  text-decoration: underline;
                }
              }
              .active{
                background-color: #a7a7a7;
                color: #fff;
              }
              span{
                color: #d8d8d8;
                margin: 0 8px;
              }
            }
          }
        }
      }
    }
  }
</style>